package myJs.admin.wechatMemberManage

import myJs.Implicits._
import myJs.cps._
import myJs.myPkg._
import myJs.myPkg.jquery.$
import myJs.tool.Tool
import org.scalajs.dom.{FormData, html}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.core.facade.React
import slinky.web.html._

import scala.concurrent.ExecutionContext.Implicits.global
import scala.concurrent.Future
import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object AddCp {

  case class Props(refreshTableB: () => Future[Unit], show: Boolean = false, showChange: Boolean => Unit)

  val component = FunctionalComponent[Props] { props =>

    val formRef = React.createRef[html.Form]

    object FTool {

      def handleClose = () => {
        props.showChange(false)
      }

      def bootstrapValidator = {
        val url = "http://localhost:9000/panda/admin/wechatMember/phoneCheck"
        val formJq = $(formRef.current)
        val dict: js.Dictionary[js.Any] = js.Dictionary(
          "feedbackIcons" -> js.Dictionary(
            "valid" -> "glyphicon glyphicon-ok",
            "invalid" -> "glyphicon glyphicon-remove",
            "validating" -> "glyphicon glyphicon-refresh",
          ),
          "fields" -> js.Dictionary(
            "phone" -> {
              val info = "手机"
              js.Dictionary(
                "validators" -> js.Dictionary(
                  "notEmpty" -> js.Dictionary(
                    "message" -> s"${info}不能为空！"
                  ),
                  "phone" -> js.Dictionary(
                    "country" -> "CN",
                    "message" -> s"${info}格式不正确！"
                  ),
                  "remote" -> js.Dictionary(
                    "message" -> s"${info}已存在！",
                    "url" -> url,
                    "delay" -> 1000,
                    "type" -> "POST",
                  ),
                )
              )
            },
          )
        )
        formJq.bootstrapValidator(dict)
      }

      def add = () => {
        val formJq = $(formRef.current)
        val bv = formJq.bv
        bv.validate()
        val valid = bv.isValid()
        if (valid) {
          val index = layer.alert(Tool.myElement, Tool.layerOptions)
          val url = "http://localhost:9000/panda/admin/wechatMember/add"
          val formData = new FormData(formJq(0).toHTMLFormElement)
          MyFetch.post(url = s"${url}", data = formData,
          ).map { xhr =>
            props.refreshTableB().map { x =>
              layer.close(index)
              swal(SwalOptions(title = "成功", text = "新增成功!", `type` = "success"))
              props.showChange(false)
            }
          }
        }
        ()
      }

    }

    useEffect(() => {
      if (props.show) {
        FTool.bootstrapValidator
      }
    }, List(props.show)
    )

    Modal(onHide = FTool.handleClose, show = props.show, dialogClassName = "addModal")(
      Modal.Header(bsPrefix = "modal-header bg-primary", closeButton = true)(
        Modal.Title(
          i(className := "fa fa-plus"),
          span(style := Style(fontWeight = "bold"), id := "lblAddTitle", " 新增")
        )
      ),
      Modal.Body(
        form(id := "form", data - "toggle" := "validator", className := "form-horizontal", ref := formRef,
          div(className := "row-fluid",
            InputInlineCp(label = "手机", name = "phone", labelWidth = 2, inputWidth = 8),
          )
        )
      ),
      Modal.Footer(bsPrefix  = "modal-footer bg-info")(
        button(`type` := "button", className := "btn blue myAdd", "确定", onClick := FTool.add),
        button(`type` := "button", className := "btn green", data - "dismiss" := "modal", "取消",
          onClick := FTool.handleClose),
      )

    )

  }


}
